<template>
  <div class="mobile-media-detail">
    <!-- 头部导航 -->
    <div class="detail-header glass-card">
      <button class="back-btn" @click="goBack">
        <tiny-icon-chevron-left />
      </button>
      <div class="header-title">
        <h1>媒体详情</h1>
      </div>
      <div class="header-actions">
        <button class="action-btn" @click="toggleFavorite">
          <tiny-icon-heart-fill v-if="mediaDetail.isFavorite" class="favorited" />
          <tiny-icon-heart v-else />
        </button>
        <button class="action-btn" @click="showShareDialog">
          <tiny-icon-share />
        </button>
        <button class="action-btn" @click="showMoreMenu">
          <tiny-icon-more />
        </button>
      </div>
    </div>

    <!-- 媒体预览区域 -->
    <div class="media-preview-container">
      <!-- 图片预览 -->
      <div v-if="mediaDetail.fileType === 'image'" class="image-preview">
        <img
          :alt="mediaDetail.originalFileName"
          :src="mediaDetail.fileUrl"
          class="preview-image"
          @click="openImageViewer"
          @error="handleImageError"
          @load="handleImageLoad"
        />

        <!-- 图片信息叠加 -->
        <div v-if="imageMetadata" class="image-overlay">
          <div class="image-info">
            <span class="resolution">{{ imageMetadata.width }} × {{ imageMetadata.height }}</span>
            <span class="size">{{ formatFileSize(mediaDetail.fileSize) }}</span>
          </div>
        </div>
      </div>

      <!-- 视频预览 -->
      <div v-else-if="mediaDetail.fileType === 'video'" class="video-preview">
        <video
          ref="videoPlayer"
          :poster="mediaDetail.thumbnailUrl"
          :src="mediaDetail.fileUrl"
          class="preview-video"
          controls
          preload="metadata"
          @loadedmetadata="handleVideoLoad"
          @timeupdate="handleVideoProgress"
        ></video>

        <!-- 视频控制覆盖层 -->
        <div v-if="!isVideoPlaying" class="video-overlay">
          <button class="play-btn" @click="playVideo">
            <tiny-icon-play />
          </button>
        </div>

        <!-- 视频信息 -->
        <div v-if="videoMetadata" class="video-info">
          <span class="duration">{{ formatDuration(videoMetadata.duration) }}</span>
          <span class="quality">{{ videoMetadata.resolution }}</span>
        </div>
      </div>

      <!-- 音频预览 -->
      <div v-else-if="mediaDetail.fileType === 'audio'" class="audio-preview">
        <div class="audio-visualizer">
          <div class="album-cover">
            <tiny-icon-music />
          </div>
          <div class="waveform-container">
            <div ref="waveformRef" class="waveform"></div>
          </div>
        </div>

        <!-- 音频控制器 -->
        <div class="audio-controls">
          <button class="control-btn" @click="toggleAudio">
            <tiny-icon-play v-if="!isAudioPlaying" />
            <tiny-icon-pause v-else />
          </button>
          <div class="progress-container">
            <input
              v-model="audioProgress"
              class="progress-slider"
              max="100"
              min="0"
              type="range"
              @input="seekAudio"
            />
            <div class="time-display">
              <span>{{ formatTime(currentTime) }}</span>
              <span>{{ formatTime(totalTime) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 文档预览 -->
      <div v-else class="document-preview">
        <div class="document-icon">
          <component :is="getFileIcon(mediaDetail.fileFormat)" />
        </div>
        <div class="document-info">
          <h3>{{ mediaDetail.originalFileName }}</h3>
          <p>{{ mediaDetail.fileFormat.toUpperCase() }} 文档</p>
          <button class="download-btn" @click="downloadFile">
            <tiny-icon-download />
            下载查看
          </button>
        </div>
      </div>
    </div>

    <!-- 媒体信息卡片 -->
    <div class="info-cards">
      <!-- 基本信息卡片 -->
      <div class="info-card glass-card">
        <div class="card-header">
          <tiny-icon-info />
          <span>基本信息</span>
        </div>
        <div class="card-content">
          <div class="info-row">
            <span class="label">文件名</span>
            <span class="value">{{ mediaDetail.originalFileName }}</span>
          </div>
          <div class="info-row">
            <span class="label">文件大小</span>
            <span class="value">{{ formatFileSize(mediaDetail.fileSize) }}</span>
          </div>
          <div class="info-row">
            <span class="label">上传时间</span>
            <span class="value">{{ formatDate(mediaDetail.createTime) }}</span>
          </div>
          <div class="info-row">
            <span class="label">文件格式</span>
            <span class="value">{{ mediaDetail.fileFormat.toUpperCase() }}</span>
          </div>
          <div v-if="mediaDetail.viewCount" class="info-row">
            <span class="label">查看次数</span>
            <span class="value">{{ mediaDetail.viewCount }}</span>
          </div>
        </div>
      </div>

      <!-- 标签卡片 -->
      <div v-if="mediaDetail.userTags || mediaDetail.aiTags" class="info-card glass-card">
        <div class="card-header">
          <tiny-icon-tag />
          <span>标签信息</span>
          <button class="edit-btn" @click="editTags">
            <tiny-icon-edit />
          </button>
        </div>
        <div class="card-content">
          <!-- 用户标签 -->
          <div v-if="mediaDetail.userTags" class="tag-section">
            <h4>用户标签</h4>
            <div class="tag-list">
              <span
                v-for="tag in mediaDetail.userTags.split(',')"
                :key="tag"
                class="tag user-tag"
              >
                {{ tag.trim() }}
              </span>
            </div>
          </div>

          <!-- AI标签 -->
          <div v-if="mediaDetail.aiTags" class="tag-section">
            <h4>AI标签</h4>
            <div class="tag-list">
              <span
                v-for="tag in mediaDetail.aiTags.split(',')"
                :key="tag"
                class="tag ai-tag"
              >
                <tiny-icon-magic class="ai-icon" />
                {{ tag.trim() }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 位置信息卡片 -->
      <div v-if="mediaDetail.location || hasCoordinates" class="info-card glass-card">
        <div class="card-header">
          <tiny-icon-location />
          <span>位置信息</span>
        </div>
        <div class="card-content">
          <div v-if="mediaDetail.location" class="location-text">
            {{ mediaDetail.location }}
          </div>
          <div v-if="hasCoordinates" class="coordinates">
            {{ mediaDetail.latitude.toFixed(6) }}, {{ mediaDetail.longitude.toFixed(6) }}
          </div>
          <button v-if="hasCoordinates" class="map-btn" @click="showMap">
            <tiny-icon-map />
            查看地图
          </button>
        </div>
      </div>

      <!-- 统计信息卡片 -->
      <div class="info-card glass-card">
        <div class="card-header">
          <tiny-icon-chart />
          <span>统计信息</span>
        </div>
        <div class="card-content">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ mediaDetail.viewCount || 0 }}</div>
              <div class="stat-label">查看</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ mediaDetail.downloadCount || 0 }}</div>
              <div class="stat-label">下载</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ shareCount }}</div>
              <div class="stat-label">分享</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ commentCount }}</div>
              <div class="stat-label">评论</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <button class="action-button primary" @click="downloadFile">
        <tiny-icon-download />
        下载
      </button>
      <button class="action-button" @click="showShareDialog">
        <tiny-icon-share />
        分享
      </button>
      <button class="action-button" @click="editMedia">
        <tiny-icon-edit />
        编辑
      </button>
      <button class="action-button danger" @click="showDeleteConfirm">
        <tiny-icon-delete />
        删除
      </button>
    </div>

    <!-- 分享对话框 -->
    <transition name="modal">
      <div v-if="shareDialogVisible" class="share-dialog-overlay" @click="hideShareDialog">
        <div class="share-dialog glass-card" @click.stop>
          <div class="dialog-header">
            <h3>分享媒体</h3>
            <button class="close-btn" @click="hideShareDialog">
              <tiny-icon-close />
            </button>
          </div>
          <div class="dialog-content">
            <div class="share-options">
              <button class="share-option" @click="shareToWechat">
                <div class="share-icon wechat"></div>
                <span>微信</span>
              </button>
              <button class="share-option" @click="shareToWeibo">
                <div class="share-icon weibo"></div>
                <span>微博</span>
              </button>
              <button class="share-option" @click="copyShareLink">
                <div class="share-icon link"></div>
                <span>复制链接</span>
              </button>
              <button class="share-option" @click="saveToAlbum">
                <div class="share-icon save"></div>
                <span>保存到相册</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 标签编辑对话框 -->
    <transition name="modal">
      <div v-if="tagEditDialogVisible" class="tag-edit-overlay" @click="hideTagEditDialog">
        <div class="tag-edit-dialog glass-card" @click.stop>
          <div class="dialog-header">
            <h3>编辑标签</h3>
            <button class="close-btn" @click="hideTagEditDialog">
              <tiny-icon-close />
            </button>
          </div>
          <div class="dialog-content">
            <div class="tag-input-section">
              <label>添加标签</label>
              <div class="tag-input-group">
                <input
                  v-model="newTag"
                  class="tag-input"
                  placeholder="输入标签名称"
                  type="text"
                  @keyup.enter="addTag"
                />
                <button class="add-tag-btn" @click="addTag">添加</button>
              </div>
            </div>

            <div class="current-tags">
              <h4>当前标签</h4>
              <div class="editable-tags">
                <span
                  v-for="(tag, index) in editableTags"
                  :key="index"
                  class="editable-tag"
                >
                  {{ tag }}
                  <button class="remove-tag" @click="removeTag(index)">
                    <tiny-icon-close />
                  </button>
                </span>
              </div>
            </div>

            <div class="dialog-actions">
              <button class="dialog-btn secondary" @click="hideTagEditDialog">取消</button>
              <button class="dialog-btn primary" @click="saveTags">保存</button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 更多操作菜单 -->
    <transition name="slide-up">
      <div v-if="moreMenuVisible" class="more-menu-overlay" @click="hideMoreMenu">
        <div class="more-menu glass-card" @click.stop>
          <div class="menu-header">
            <div class="drag-handle"></div>
          </div>
          <div class="menu-items">
            <button class="menu-item" @click="renameFile">
              <tiny-icon-edit />
              <span>重命名</span>
            </button>
            <button class="menu-item" @click="moveFile">
              <tiny-icon-folder />
              <span>移动到...</span>
            </button>
            <button class="menu-item" @click="copyFile">
              <tiny-icon-copy />
              <span>复制</span>
            </button>
            <button v-if="mediaDetail.fileType === 'image'" class="menu-item" @click="setAsWallpaper">
              <tiny-icon-image />
              <span>设为壁纸</span>
            </button>
            <button class="menu-item" @click="generateShareLink">
              <tiny-icon-link />
              <span>生成分享链接</span>
            </button>
            <button class="menu-item danger" @click="showDeleteConfirm">
              <tiny-icon-delete />
              <span>删除</span>
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 全屏图片查看器 -->
    <transition name="fade">
      <div v-if="imageViewerVisible" class="image-viewer" @click="hideImageViewer">
        <div class="viewer-header">
          <button class="viewer-close" @click="hideImageViewer">
            <tiny-icon-close />
          </button>
        </div>
        <div class="viewer-content" @click.stop>
          <img
            ref="viewerImage"
            :alt="mediaDetail.originalFileName"
            :src="mediaDetail.fileUrl"
            class="viewer-image"
          />
        </div>
        <div class="viewer-controls">
          <button class="viewer-control" @click="zoomOut">
            <tiny-icon-zoom-out />
          </button>
          <button class="viewer-control" @click="zoomReset">
            <tiny-icon-reset />
          </button>
          <button class="viewer-control" @click="zoomIn">
            <tiny-icon-zoom-in />
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { TinyMessage as Message } from '@opentiny/vue'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const mediaDetail = ref({
  fileId: '',
  fileName: '',
  originalFileName: '',
  fileUrl: '',
  thumbnailUrl: '',
  fileType: '',
  fileFormat: '',
  fileSize: 0,
  createTime: '',
  userTags: '',
  aiTags: '',
  location: '',
  latitude: null as number | null,
  longitude: null as number | null,
  isFavorite: false,
  viewCount: 0,
  downloadCount: 0
})

const shareDialogVisible = ref(false)
const tagEditDialogVisible = ref(false)
const moreMenuVisible = ref(false)
const imageViewerVisible = ref(false)
const isVideoPlaying = ref(false)
const isAudioPlaying = ref(false)
const audioProgress = ref(0)
const currentTime = ref(0)
const totalTime = ref(0)
const shareCount = ref(12)
const commentCount = ref(8)
const imageMetadata = ref<any>(null)
const videoMetadata = ref<any>(null)
const newTag = ref('')
const editableTags = ref<string[]>([])

// DOM 引用
const videoPlayer = ref<HTMLVideoElement>()
const waveformRef = ref<HTMLElement>()
const viewerImage = ref<HTMLImageElement>()

// 计算属性
const hasCoordinates = computed(() => {
  return mediaDetail.value.latitude !== null && mediaDetail.value.longitude !== null
})

// 方法
const goBack = () => {
  router.back()
}

const loadMediaDetail = async () => {
  try {
    const fileId = route.params.id
    // TODO: 从API加载媒体详情
    // const response = await mediaApi.getMediaDetail(fileId)
    // mediaDetail.value = response.data

    // 模拟数据
    mediaDetail.value = {
      fileId: fileId as string,
      fileName: 'IMG_20240115_143022.jpg',
      originalFileName: '海边日落美景.jpg',
      fileUrl: 'https://picsum.photos/800/600?random=1',
      thumbnailUrl: 'https://picsum.photos/400/300?random=1',
      fileType: 'image',
      fileFormat: 'jpg',
      fileSize: 2457600,
      createTime: '2024-01-15 14:30:22',
      userTags: '日落,海边,风景,摄影',
      aiTags: '自然,海洋,天空,云彩,黄昏',
      location: '青岛第一海水浴场',
      latitude: 36.0562,
      longitude: 120.3348,
      isFavorite: true,
      viewCount: 156,
      downloadCount: 23
    }

    // 初始化编辑标签数组
    if (mediaDetail.value.userTags) {
      editableTags.value = mediaDetail.value.userTags.split(',').map(tag => tag.trim())
    }
  } catch (error) {
    Message.error('加载媒体详情失败')
    router.back()
  }
}

const toggleFavorite = async () => {
  try {
    mediaDetail.value.isFavorite = !mediaDetail.value.isFavorite
    // TODO: 调用API更新收藏状态
    Message.success(mediaDetail.value.isFavorite ? '已添加到收藏' : '已取消收藏')
  } catch (error) {
    Message.error('操作失败')
  }
}

const showShareDialog = () => {
  shareDialogVisible.value = true
}

const hideShareDialog = () => {
  shareDialogVisible.value = false
}

const showMoreMenu = () => {
  moreMenuVisible.value = true
}

const hideMoreMenu = () => {
  moreMenuVisible.value = false
}

const editTags = () => {
  tagEditDialogVisible.value = true
}

const hideTagEditDialog = () => {
  tagEditDialogVisible.value = false
  newTag.value = ''
}

const addTag = () => {
  if (newTag.value.trim() && !editableTags.value.includes(newTag.value.trim())) {
    editableTags.value.push(newTag.value.trim())
    newTag.value = ''
  }
}

const removeTag = (index: number) => {
  editableTags.value.splice(index, 1)
}

const saveTags = async () => {
  try {
    const tags = editableTags.value.join(',')
    mediaDetail.value.userTags = tags
    // TODO: 调用API保存标签
    hideTagEditDialog()
    Message.success('标签保存成功')
  } catch (error) {
    Message.error('保存失败')
  }
}

const openImageViewer = () => {
  if (mediaDetail.value.fileType === 'image') {
    imageViewerVisible.value = true
  }
}

const hideImageViewer = () => {
  imageViewerVisible.value = false
}

const playVideo = () => {
  if (videoPlayer.value) {
    videoPlayer.value.play()
    isVideoPlaying.value = true
  }
}

const handleImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  imageMetadata.value = {
    width: img.naturalWidth,
    height: img.naturalHeight
  }
}

const handleImageError = () => {
  Message.error('图片加载失败')
}

const handleVideoLoad = () => {
  if (videoPlayer.value) {
    videoMetadata.value = {
      duration: videoPlayer.value.duration,
      resolution: `${videoPlayer.value.videoWidth}x${videoPlayer.value.videoHeight}`
    }
  }
}

const handleVideoProgress = () => {
  // 处理视频播放进度
}

const toggleAudio = () => {
  isAudioPlaying.value = !isAudioPlaying.value
  // TODO: 实现音频播放控制
}

const seekAudio = (event: Event) => {
  // TODO: 实现音频进度控制
}

const downloadFile = () => {
  // TODO: 实现文件下载
  Message.success('开始下载')
}

const editMedia = () => {
  router.push(`/media/edit/${mediaDetail.value.fileId}`)
}

const showDeleteConfirm = () => {
  // TODO: 显示删除确认对话框
  Message.warning('删除功能开发中')
}

const shareToWechat = () => {
  Message.success('分享到微信')
  hideShareDialog()
}

const shareToWeibo = () => {
  Message.success('分享到微博')
  hideShareDialog()
}

const copyShareLink = () => {
  Message.success('链接已复制到剪贴板')
  hideShareDialog()
}

const saveToAlbum = () => {
  Message.success('已保存到相册')
  hideShareDialog()
}

const showMap = () => {
  // TODO: 显示地图
  Message.info('地图功能开发中')
}

const zoomIn = () => {
  // TODO: 实现图片放大
}

const zoomOut = () => {
  // TODO: 实现图片缩小
}

const zoomReset = () => {
  // TODO: 重置图片缩放
}

const renameFile = () => {
  hideMoreMenu()
  Message.info('重命名功能开发中')
}

const moveFile = () => {
  hideMoreMenu()
  Message.info('移动功能开发中')
}

const copyFile = () => {
  hideMoreMenu()
  Message.info('复制功能开发中')
}

const setAsWallpaper = () => {
  hideMoreMenu()
  Message.success('已设置为壁纸')
}

const generateShareLink = () => {
  hideMoreMenu()
  Message.success('分享链接已生成')
}

// 工具方法
const formatFileSize = (bytes: number): string => {
  const sizes = ['B', 'KB', 'MB', 'GB']
  if (bytes === 0) return '0 B'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
}

const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

const formatDuration = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const getFileIcon = (format: string) => {
  const iconMap: Record<string, string> = {
    pdf: 'tiny-icon-file-pdf',
    doc: 'tiny-icon-file-word',
    docx: 'tiny-icon-file-word',
    xls: 'tiny-icon-file-excel',
    xlsx: 'tiny-icon-file-excel',
    ppt: 'tiny-icon-file-ppt',
    pptx: 'tiny-icon-file-ppt',
    txt: 'tiny-icon-file-text'
  }
  return iconMap[format] || 'tiny-icon-file'
}

// 生命周期
onMounted(() => {
  loadMediaDetail()
})
</script>

<style lang="scss" scoped>
.mobile-media-detail {
  min-height: 100vh;
  background: $gradient-primary;
  padding-bottom: $spacing-4;

  .detail-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $z-index-fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top) $spacing-4 $spacing-3;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);

    .back-btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: $gray-700;
      font-size: 20px;
      cursor: pointer;
    }

    .header-title {
      flex: 1;
      text-align: center;

      h1 {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $gray-800;
        margin: 0;
      }
    }

    .header-actions {
      display: flex;
      gap: $spacing-1;

      .action-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: $gray-700;
        font-size: 18px;
        cursor: pointer;

        &:hover {
          background: rgba($gray-500, 0.1);
        }

        .favorited {
          color: $error;
        }
      }
    }
  }

  .media-preview-container {
    margin-top: 100px;
    position: relative;

    .image-preview {
      position: relative;
      width: 100%;
      background: black;

      .preview-image {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
        display: block;
      }

      .image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        padding: $spacing-4;
        color: white;

        .image-info {
          display: flex;
          justify-content: space-between;
          font-size: $font-size-sm;
        }
      }
    }

    .video-preview {
      position: relative;
      background: black;

      .preview-video {
        width: 100%;
        height: auto;
        max-height: 70vh;
      }

      .video-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .play-btn {
          width: 80px;
          height: 80px;
          background: rgba(255, 255, 255, 0.9);
          border: none;
          border-radius: $radius-full;
          color: $primary-500;
          font-size: 32px;
          cursor: pointer;
        }
      }

      .video-info {
        position: absolute;
        bottom: $spacing-3;
        right: $spacing-3;
        display: flex;
        gap: $spacing-2;
        color: white;
        font-size: $font-size-xs;

        span {
          background: rgba(0, 0, 0, 0.6);
          padding: 2px $spacing-2;
          border-radius: $radius-sm;
        }
      }
    }

    .audio-preview {
      background: $gradient-primary;
      padding: $spacing-8;
      text-align: center;

      .audio-visualizer {
        margin-bottom: $spacing-6;

        .album-cover {
          width: 120px;
          height: 120px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: $radius-xl;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto $spacing-4;
          color: white;
          font-size: 48px;
        }

        .waveform-container {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .audio-controls {
        .control-btn {
          width: 60px;
          height: 60px;
          background: white;
          border: none;
          border-radius: $radius-full;
          color: $primary-500;
          font-size: 24px;
          cursor: pointer;
          margin-bottom: $spacing-4;
        }

        .progress-container {
          width: 100%;
          max-width: 300px;
          margin: 0 auto;

          .progress-slider {
            width: 100%;
            margin-bottom: $spacing-2;
          }

          .time-display {
            display: flex;
            justify-content: space-between;
            color: white;
            font-size: $font-size-sm;
          }
        }
      }
    }

    .document-preview {
      background: $gradient-primary;
      padding: $spacing-12;
      text-align: center;
      color: white;

      .document-icon {
        font-size: 80px;
        margin-bottom: $spacing-4;
      }

      .document-info {
        h3 {
          font-size: $font-size-xl;
          margin-bottom: $spacing-2;
        }

        p {
          font-size: $font-size-base;
          opacity: 0.8;
          margin-bottom: $spacing-6;
        }

        .download-btn {
          display: inline-flex;
          align-items: center;
          gap: $spacing-2;
          padding: $spacing-3 $spacing-6;
          background: white;
          border: none;
          border-radius: $radius-full;
          color: $primary-500;
          font-size: $font-size-base;
          font-weight: $font-weight-medium;
          cursor: pointer;
        }
      }
    }
  }

  .info-cards {
    padding: $spacing-4;
    display: flex;
    flex-direction: column;
    gap: $spacing-4;

    .info-card {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      border-radius: $radius-xl;
      padding: $spacing-4;

      .card-header {
        display: flex;
        align-items: center;
        gap: $spacing-2;
        margin-bottom: $spacing-3;
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        color: $gray-800;

        .edit-btn {
          margin-left: auto;
          background: transparent;
          border: none;
          color: $primary-500;
          cursor: pointer;
        }
      }

      .card-content {
        .info-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: $spacing-2;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: $gray-600;
            font-size: $font-size-sm;
          }

          .value {
            color: $gray-800;
            font-weight: $font-weight-medium;
            text-align: right;
            flex: 1;
            margin-left: $spacing-3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .tag-section {
          margin-bottom: $spacing-3;

          &:last-child {
            margin-bottom: 0;
          }

          h4 {
            font-size: $font-size-sm;
            color: $gray-600;
            margin-bottom: $spacing-2;
          }

          .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-2;

            .tag {
              padding: 4px $spacing-2;
              border-radius: $radius-full;
              font-size: $font-size-xs;
              display: inline-flex;
              align-items: center;
              gap: 4px;

              &.user-tag {
                background: rgba($primary-500, 0.1);
                color: $primary-600;
              }

              &.ai-tag {
                background: rgba($neon-purple, 0.1);
                color: $neon-purple;

                .ai-icon {
                  font-size: 10px;
                }
              }
            }
          }
        }

        .location-text {
          color: $gray-800;
          margin-bottom: $spacing-2;
        }

        .coordinates {
          color: $gray-600;
          font-size: $font-size-sm;
          font-family: $font-family-mono;
          margin-bottom: $spacing-3;
        }

        .map-btn {
          display: inline-flex;
          align-items: center;
          gap: $spacing-1;
          padding: $spacing-2 $spacing-3;
          background: $primary-500;
          border: none;
          border-radius: $radius-md;
          color: white;
          font-size: $font-size-sm;
          cursor: pointer;
        }

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: $spacing-3;

          .stat-item {
            text-align: center;

            .stat-value {
              font-size: $font-size-xl;
              font-weight: $font-weight-bold;
              color: $primary-500;
              margin-bottom: 4px;
            }

            .stat-label {
              font-size: $font-size-xs;
              color: $gray-600;
            }
          }
        }
      }
    }
  }

  .action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-3;
    padding: $spacing-4;

    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: $spacing-1;
      padding: $spacing-4;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: $radius-xl;
      color: $gray-700;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      cursor: pointer;
      transition: all $duration-fast ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-lg;
      }

      &.primary {
        background: $gradient-primary;
        color: white;
        border-color: transparent;
      }

      &.danger {
        color: $error;
      }
    }
  }

  // 对话框样式
  .share-dialog-overlay,
  .tag-edit-overlay,
  .more-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: $z-index-modal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-4;
  }

  .more-menu-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .share-dialog,
  .tag-edit-dialog {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: $radius-2xl;
    overflow: hidden;

    .dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: $spacing-4;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      h3 {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $gray-800;
        margin: 0;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: $gray-500;
        cursor: pointer;
      }
    }

    .dialog-content {
      padding: $spacing-4;
    }
  }

  .share-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-4;

    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-4;
      background: transparent;
      border: 1px solid rgba($gray-300, 0.3);
      border-radius: $radius-lg;
      cursor: pointer;
      transition: all $duration-fast ease;

      &:hover {
        background: rgba($gray-100, 0.5);
      }

      .share-icon {
        width: 48px;
        height: 48px;
        border-radius: $radius-lg;

        &.wechat { background: #07c160; }
        &.weibo { background: #e6162d; }
        &.link { background: $primary-500; }
        &.save { background: $success; }
      }

      span {
        font-size: $font-size-sm;
        color: $gray-700;
      }
    }
  }

  .tag-input-section {
    margin-bottom: $spacing-4;

    label {
      display: block;
      margin-bottom: $spacing-2;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      color: $gray-700;
    }

    .tag-input-group {
      display: flex;
      gap: $spacing-2;

      .tag-input {
        flex: 1;
        padding: $spacing-3;
        border: 1px solid rgba($gray-300, 0.3);
        border-radius: $radius-lg;
        font-size: $font-size-base;
        background: rgba(255, 255, 255, 0.5);
        outline: none;

        &:focus {
          border-color: $primary-500;
        }
      }

      .add-tag-btn {
        padding: $spacing-3 $spacing-4;
        background: $primary-500;
        border: none;
        border-radius: $radius-lg;
        color: white;
        font-size: $font-size-sm;
        cursor: pointer;
      }
    }
  }

  .current-tags {
    margin-bottom: $spacing-4;

    h4 {
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      color: $gray-700;
      margin-bottom: $spacing-2;
    }

    .editable-tags {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-2;

      .editable-tag {
        display: inline-flex;
        align-items: center;
        gap: $spacing-1;
        padding: 4px $spacing-2;
        background: rgba($primary-500, 0.1);
        color: $primary-600;
        border-radius: $radius-full;
        font-size: $font-size-xs;

        .remove-tag {
          background: transparent;
          border: none;
          color: inherit;
          cursor: pointer;
          padding: 0;
          font-size: 12px;
        }
      }
    }
  }

  .dialog-actions {
    display: flex;
    gap: $spacing-3;
    justify-content: flex-end;

    .dialog-btn {
      padding: $spacing-2 $spacing-4;
      border: 1px solid rgba($gray-300, 0.3);
      border-radius: $radius-lg;
      font-size: $font-size-sm;
      cursor: pointer;

      &.secondary {
        background: transparent;
        color: $gray-600;
      }

      &.primary {
        background: $primary-500;
        border-color: $primary-500;
        color: white;
      }
    }
  }

  .more-menu {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: $radius-2xl $radius-2xl 0 0;
    padding-bottom: env(safe-area-inset-bottom);

    .menu-header {
      display: flex;
      justify-content: center;
      padding: $spacing-3;

      .drag-handle {
        width: 36px;
        height: 4px;
        background: $gray-300;
        border-radius: $radius-full;
      }
    }

    .menu-items {
      .menu-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: $spacing-3;
        padding: $spacing-4;
        background: transparent;
        border: none;
        color: $gray-700;
        font-size: $font-size-base;
        cursor: pointer;
        transition: background $duration-fast ease;

        &:hover {
          background: rgba($gray-100, 0.5);
        }

        &.danger {
          color: $error;
        }
      }
    }
  }

  .image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: $z-index-modal;
    display: flex;
    flex-direction: column;

    .viewer-header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      padding: env(safe-area-inset-top) $spacing-4 $spacing-3;

      .viewer-close {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: $radius-full;
        color: white;
        font-size: 20px;
        cursor: pointer;
      }
    }

    .viewer-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px $spacing-4 80px;

      .viewer-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }

    .viewer-controls {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: $spacing-4;
      padding: $spacing-4 $spacing-4 calc(env(safe-area-inset-bottom) + #{$spacing-4});
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

      .viewer-control {
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: $radius-full;
        color: white;
        font-size: 18px;
        cursor: pointer;
      }
    }
  }
}

// 动画
.modal-enter-active,
.modal-leave-active {
  transition: opacity $duration-normal ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform $duration-normal ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity $duration-normal ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 暗色主题适配
[data-theme="dark"] {
  .mobile-media-detail {
    .detail-header,
    .info-card,
    .share-dialog,
    .tag-edit-dialog,
    .more-menu {
      background: rgba(0, 0, 0, 0.8);
      border-color: rgba(255, 255, 255, 0.1);

      .card-header,
      h3 {
        color: $gray-200;
      }

      .info-row .value {
        color: $gray-200;
      }
    }

    .action-button {
      background: rgba(0, 0, 0, 0.6);
      color: $gray-300;
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>
